<template>
  <div class="flowbar-charts-components">
    <div class="flowbar-charts-wrapper">
      <chart :options="computedBarChartOption"
             :init-options="initOptions"
             :theme="theme"
             auto-resize
             class="echarts-item"
             ref="domBarChart">
      </chart>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/graphic'
import 'echarts/lib/chart/bar'
import options from './echartsOptions.js'

const areadata = {
  '1': {
    id: 1,
    name: '办公室',
    shop_id: 1,
    points: [
      [18, 18],
      [171, 18],
      [171, 123],
      [18, 123]
    ],
    center: [85.5, 61.5]
  },
  '2': {
    id: 2,
    name: '茶水间',
    shop_id: 1,
    points: [
      [187, 16],
      [347, 16],
      [347, 117],
      [187, 117]
    ],
    center: [258, 57.5]
  },
  '3': {
    id: 3,
    name: '入口',
    shop_id: 1,
    points: [
      [357, 17],
      [651, 17],
      [651, 94],
      [357, 94]
    ],
    center: [495, 46]
  },
  '4': {
    id: 4,
    name: '研发中心',
    shop_id: 1,
    points: [
      [18, 160],
      [347, 160],
      [347, 419],
      [18, 419]
    ],
    center: [173.5, 280.5]
  },
  '5': {
    id: 5,
    name: '支持中心',
    shop_id: 1,
    points: [
      [357, 160],
      [479, 160],
      [479, 419],
      [357, 419]
    ],
    center: [409, 280.5]
  },
  '6': {
    id: 6,
    name: '会议室',
    shop_id: 1,
    points: [
      [504, 110],
      [647, 110],
      [647, 425],
      [504, 425]
    ],
    center: [566.5, 258.5]
  }
}

export default {
  name: 'flowbar-charts-components',

  components: {
    chart: ECharts
  },

  props: {
    barData: {
      default: null
    }
  },

  data () {
    return {
      options,
      theme: 'dark',
      initOptions: {
        renderer: 'canvas'
      }
    }
  },

  computed: {
    computedBarChartOption () {
      let barData = this.barData || []
      let initOptions = options
      let st = []
      let cn = []
      let an = []
      for (let i = barData.length - 1; i >= 0; i--) {
        cn.unshift(barData[i]['customer_num'])
        an.unshift(areadata[barData[i]['zone_id']]['name'])
        st.unshift(Math.round((barData[i]['seconds'] / barData[i]['customer_num']) * 100) / 100)
      }
      initOptions.yAxis.data = an
      initOptions.series[0]['data'] = cn
      initOptions.series[1]['data'] = st
      initOptions.graphic[0]['style']['fill'] = (cn.length === 0 && st.length === 0) ? '#000' : 'transparent'
      // initOptions.yAxis.axisLine.show = !(cn.length === 0 && st.length === 0)
      initOptions.legend.show = !(cn.length === 0 && st.length === 0)
      initOptions.yAxis.show = !(cn.length === 0 && st.length === 0)
      initOptions.xAxis.show = !(cn.length === 0 && st.length === 0)
      initOptions.xAxis[0].axisLine.show = !(cn.length === 0 && st.length === 0)
      return initOptions
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
  // scoped
  .flowbar-charts-components {
    height: 100%;
    overflow: hidden;
    .flowbar-charts-wrapper {
      position: relative;
      height: 100%;
      .echarts-item {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    }
  }
</style>
